<template>
    <!-- 查看详情 -->
    <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="['Detail'].includes(baTable.form.operate!)"
        @close="baTable.toggleForm"
        width="75%"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ t('xmwms.outboundOrder.detail') }}
            </div>
        </template>

        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'" id="printContent">
                <el-descriptions :column="3">
                    <template #extra>
                        <el-button id="no-print" @click="openPrint()" type="primary">{{ t('xmwms.outboundOrder.print_outbound_order') }}</el-button>
                    </template>
                    <el-descriptions-item width="33%" :label="t('xmwms.outboundOrder.outbound_no')">
                        {{ baTable.form.extend!.detail.outbound_no }}
                    </el-descriptions-item>
                    <el-descriptions-item width="33%" :label="t('xmwms.outboundOrder.order_sn')">
                        {{ baTable.form.extend!.detail.order_sn }}
                    </el-descriptions-item>
                    <el-descriptions-item width="33%" :label="t('xmwms.outboundOrder.wms_customer__name')">
                        {{ baTable.form.extend!.detail.wmsCustomer ? baTable.form.extend!.detail.wmsCustomer.name : '' }}
                    </el-descriptions-item>
                    <el-descriptions-item width="33%" :label="t('xmwms.outboundOrder.type')">
                        {{ baTable.form.extend!.detail.type_text }}
                    </el-descriptions-item>
                    <el-descriptions-item width="33%" :label="t('xmwms.outboundOrder.updatetime')">
                        {{ baTable.form.extend!.detail.update_time }}
                    </el-descriptions-item>
                    <el-descriptions-item width="33%" :label="t('xmwms.warehousingOrder.audit_status')">
                        {{ baTable.form.extend!.detail.audit_status_text }}
                    </el-descriptions-item>
                    <el-descriptions-item width="100%" :label="t('xmwms.outboundOrder.remark')">
                        {{ baTable.form.extend!.detail.remark }}
                    </el-descriptions-item>
                </el-descriptions>

                <!--带合计的表格-->
                <el-table
                    border
                    :data="baTable.form.extend!.detail.outboundOrderDetail"
                    show-summary
                    style="width: 100%; margin-top: 10px"
                    :summary-method="getSummaries"
                >
                    <el-table-column :label="t('xmwms.outboundOrder.serial_number')" type="index" width="55" header-align="center" />
                    <el-table-column :label="t('xmwms.outboundOrder.product_name')" prop="product.name" width="150" header-align="center" />
                    <el-table-column :label="t('xmwms.outboundOrder.product_no')" prop="product.product_no" width="100" header-align="center" />
                    <el-table-column :label="t('xmwms.outboundOrder.unit_name')" prop="product.wmsUnit.name" width="60" header-align="center" />
                    <el-table-column :label="t('xmwms.outboundOrder.spec')" prop="product.spec" width="80" header-align="center" />
                    <el-table-column :label="t('xmwms.outboundOrder.actual_quantity')" prop="actual_quantity" width="70" header-align="center" />
                    <el-table-column :label="t('xmwms.outboundOrder.price')" prop="price" width="70" header-align="center" />
                    <el-table-column :label="t('xmwms.outboundOrder.total_price')" prop="total_price" width="70" header-align="center" />
                    <el-table-column
                        :label="t('xmwms.outboundOrder.warehouse_shelf')"
                        prop="warehouse_shelf_id_text"
                        width="100"
                        header-align="center"
                    />
                    <el-table-column :label="t('xmwms.outboundOrder.remark')" prop="remark" header-align="center" />
                </el-table>
            </div>
        </el-scrollbar>

        <template #footer>
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.toggleForm('')">{{ t('Cancel') }}</el-button>
                <el-button
                    v-blur
                    :loading="baTable.form.submitLoading"
                    @click="auditClick(baTable.form.extend!.detail.id)"
                    v-if="baTable.form.extend!.detail.audit_status && baTable.form.extend!.detail.audit_status == 0"
                    type="primary"
                >
                    审核
                </el-button>
                <el-button v-else type="info" :disabled="true"> 已审核 </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import { useI18n } from 'vue-i18n'
import type BaTable from '/@/utils/baTable'
import printJS from 'print-js'
import { auditPost } from '/@/api/backend/xmwms/outboundOrder'
import { ElNotification } from 'element-plus'

const baTable = inject('baTable') as BaTable
const { t } = useI18n()

const openPrint = () => {
    printJS({
        printable: 'printContent',
        type: 'html',
        maxWidth: 1150, // 最大宽度
        font_size: '', // 不设置则使用默认字体大小
        header: '',
        documentTitle: t('xmwms.outboundOrder.outbound_order'),
        ignoreElements: ['no-print'],
        style: `@page {size: auto;margin-bottom: 0}`,
        // 继承原来的所有样式
        targetStyles: ['*'],
    })
}

const getSummaries = (param: any) => {
    const { columns, data } = param
    const sums: any = []
    columns.forEach((column: any, index: any) => {
        // 第一列 显示文字 小计
        if (index === 0) {
            sums[index] = '合计'
            return
        }
        if (index == 5 || index == 6 || index == 7) {
            // 只针对第3列进行合计
            const values = data.map((item: any) => Number(item[column.property]))
            if (!values.every((value: any) => isNaN(value))) {
                const totalV = values.reduce((prev: any, curr: any) => {
                    const value = Number(curr)
                    if (!isNaN(value)) {
                        return prev + curr
                    } else {
                        return prev
                    }
                }, 0)
                if (index == 5) {
                    sums[index] = totalV
                } else {
                    // 保留2位小数，解决小数合计列
                    sums[index] = totalV.toFixed(2)
                }
            } else {
                sums[index] = '-' // 其余列一律不进行合计
            }
        }
    })
    return sums
}

const auditClick = (id: number) => {
    baTable.form.extend!.submitLoading = true
    auditPost(id)
        .then((res) => {
            baTable.form.extend!.submitLoading = false
            ElNotification({
                message: res.msg,
                type: 'success',
            })
            baTable.form.operate = ''
            baTable.onTableHeaderAction('refresh', {})
        })
        .finally(() => {
            baTable.form.extend!.submitLoading = false
        })
}
</script>

<style scoped lang="scss"></style>
